<script setup>
import { strokeType } from "@/utils/dict"
const props = defineProps(["options"])
const option = toRef(props, "options")
</script>

<template>
  <div class="border-dotted border-2 p-1 ml-1 rounded mb-1">
    <a-form-item label="线颜色">
      <xiri-form v-model="option.color" option="color" />
    </a-form-item>
    <a-form-item label="线宽度">
      <xiri-form v-model="option.width" option="number" />
    </a-form-item>
    <a-form-item label="线类型">
      <xiri-form v-model="option.type" option="select" :optionList="strokeType" />
    </a-form-item>
    <template v-if="option.type === 'dashed'">
      <a-form-item label="虚线间隔">
        <xiri-form v-model="option.dashOffset" option="number" />
      </a-form-item>
    </template>
    <a-form-item label="阴影颜色">
      <xiri-form v-model="option.shadowColor" option="color" />
    </a-form-item>
    <a-form-item label="阴影模糊度">
      <xiri-form v-model="option.shadowBlur" option="number" />
    </a-form-item>
    <a-form-item label="阴影偏移量X">
      <xiri-form v-model="option.shadowOffsetX" option="number" />
    </a-form-item>
    <a-form-item label="阴影偏移量y">
      <xiri-form v-model="option.shadowOffsetY" option="number" />
    </a-form-item>
    <a-form-item label="透明度">
      <xiri-form v-model="option.opacity" :step="0.1" min="0" max="1" option="number" />
    </a-form-item>
  </div>
</template>

<style scoped lang="less"></style>
